<template>
  <div class="rightChart">
    <div class="operation">
      <!-- <div class="label">文件名称：</div>
      <el-input
        v-model="fileName"
        placeholder="请输入文件名称"
        size="mini"
        clearable
        style="width: 220px"
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="mini"
        @click="getFilePlayback"
        >搜索</el-button
      >
 -->
      <el-button
        v-if="playbackStatus === false"
        @click="startPlay"
        type="primary"
        size="mini"
        >开始回放</el-button
      >
      <el-button v-else type="primary" size="mini" @click="stopPlay"
        >停止回放</el-button
      >

      <!-- <el-button type="primary" size="mini" @click="readFile"
        >下载文件</el-button
      >
      <el-button type="primary" size="mini" @click="upload">上传文件</el-button> -->
      <!-- accept文件格式限制 -->
      <!-- <input
        id="excelfile"
        type="file"
        style="display: none"
        accept=".bin"
        ref="selectFileInput"
        @change="getFile"
      /> -->
    </div>
    <div class="table">
      <el-table
        :data="fileList"
        border
        :row-class-name="getRowClassName"
        @row-click="rowClick"
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="50"
        ></el-table-column>
        <el-table-column align="center" label="文件名称">
          <template slot-scope="{ row }">{{ row }}</template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// import { getFilesAPI, getPinpuStatusAPI, startPlayAPI, stopPlayAPI } from '@/api/charts.js'
export default {
  name: 'ScanSetting',
  data () {
    return {
      fileName: '', // 回放文件查询的文件名
      playbackStatus: false, // 是否正在进行文件回放
      fileList: [],
      selectedRow: null
    }
  },
  props: ['deviceId'],
  beforeDestroy () {
    if (this.playbackStatus) this.stopPlay()
  },
  methods: {
    // 获取文件回放列表和当前回放状态
    async getFilePlayback (deviceId) {
      await this.$nextTick()
      try {
        const { data } = await getFilesAPI(deviceId)
        this.fileList = data

        const { data: data1 } = await getPinpuStatusAPI()
        this.playbackStatus = data1.start

        // console.log('文件列表:', data, '文件回放状态', data1)
      } catch (error) {
        console.log(error)
      }
    },
    // 选中行高亮显示
    getRowClassName ({ row, rowINdex }) {
      return this.selectedRow && this.selectedRow === row ? 'selected-row' : ''
    },
    // 选中行事件
    rowClick (row) {
      if (this.playbackStatus) this.stopPlay()
      this.selectedRow = row
    },
    async startPlay () {
      if (!this.selectedRow) {
        return this.$message.warning('请选择想要回放的文件！')
      }
      try {
        await startPlayAPI({
          fileName: this.selectedRow,
          deviceId: this.deviceId
        })
        this.playbackStatus = true
        this.$message.success('开始回放成功！')
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败！')
      }
    },
    async stopPlay () {
      try {
        await stopPlayAPI()
        this.playbackStatus = false
        this.$message.success('停止回放成功！')
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败！')
      }
    },
    // 下载bin文件
    // async readFile () {
    //   if (!this.selectedRow) {
    //     return this.$message.warning('请选择文件！')
    //   }

    //   try {
    //     const data = await readFileAPI(this.selectedRow)
    //     /* const reader = new FileReader()

    //       reader.onload = (e) => {
    //         // reader.fileContent = e.target.result
    //         console.log('读取内容:', reader.result)
    //       }
    //       reader.readAsText(data, 'utf-8') */

    //     const objectUrl = window.URL.createObjectURL(new Blob([data]))
    //     const elink = document.createElement('a')
    //     elink.download = this.selectedRow // 下载文件名称,
    //     elink.style.display = 'none'
    //     elink.href = objectUrl
    //     document.body.appendChild(elink)
    //     elink.click()
    //     document.body.removeChild(elink)
    //     window.URL.revokeObjectURL(elink.href) // 释放URL 对象
    //     this.$message.success('下载成功！')
    //   } catch (error) {
    //     console.log(error)
    //     this.$message.error('下载失败！')
    //   }
    // },
    // 上传Bin文件 => 间接触发文件域
    upload () {
      this.$refs.selectFileInput.click()
    }
    // 上传文件
    /*  async getFile (e) {
      // console.log("上传文件:", e.target.files[0]);
      const formData = new FormData()
      formData.append('file', e.target.files[0])
      try {
        await uploadAPI(formData)
        // console.log("data", data);
        this.$message.success('上传成功！')
        this.getFilePlayback()
      } catch (error) {
        console.log(error)
        this.$message.error('上传失败！')
      }
    } */
  }
}
</script>

<style lang="less" scoped>
.rightChart {
  width: 100%;
  // height: 98vh;
  display: flex;
  flex-direction: column;
  // background-color: #d9dfeb;
  box-sizing: border-box;
  padding-bottom: 10px;

  .top {
    display: flex;
    margin-bottom: 5px;
    height: 28px;
    line-height: 28px;

    .title1 {
      padding-left: 5px;
      font-size: 16px;
      font-weight: bold;
      color: #3c3c3c;
    }
  }
  .title {
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    color: #fff;
    // background-color: #4d6081;

    text-align-last: left;
    padding-left: 20px;
  }
  .item {
    min-height: 50px;
    padding: 7px 10px;

    .content {
      display: flex;
      height: 30px;
      line-height: 30px;
      margin-bottom: 5px;

      .label {
        text-align: left;
        width: 100px;
        font-size: 14px;
      }

      .value {
        flex: 1;
      }
    }
  }

  ::v-deep .el-input-number {
    .el-input__inner {
      text-align: left;
    }
  }

  .operation {
    display: flex;
    height: 32px;
    line-height: 32px;
    margin-bottom: 10px;
    .label {
      text-align: left;
      width: 70px;
      font-size: 14px;
    }

    ::v-deep .el-button--mini {
      padding: 5px 10px;
      margin-left: 5px;
    }
  }

  ::v-deep .el-table__row{
    cursor: pointer;
  }

  ::v-deep .selected-row {
    background-color: #409eff;
    color: #fff;
    &:hover td{
      background-color: #409eff !important;
      color: #fff !important;
    }
  }

  ::v-deep .el-dialog__body{
    height: 50vh;
    overflow: auto;
  }
}
</style>
